<!--
 * @Date: 2023-04-10 15:59:06
 * @LastEditTime: 2023-04-14 20:50:23
 * @FilePath: /nlk/src/views/fundDetail/fundDetail.vue
 * 介绍:理财详情
-->
<script lang="ts" setup>
import { ApplyBuyLogs } from "@@/api/module/pagingList";
import { removeCache } from "@@/hooks/routeCache";
import { apiApplyBuyBack, apiSwitchAutoSubmit } from "@@/api/page/fundManage";
import { formatNumber } from "@@/utils/tools/tools";
import { showDialog } from "vant";
import dayjs from "dayjs";
import { useCurrentData } from "@@/hooks/date";
import { getCountdown } from "@@/utils/tools/date";
import toast from "@@/hooks/toast";
import useBalanceStore from "@@/store/useBalanceStore";

const { t } = useI18n();
const balanceStore = useBalanceStore();
const { coinEnum } = storeToRefs(balanceStore);

const route = useRoute();
const query = route.query;
const queryData = reactive<ApplyBuyLogs.ResItem>(
  JSON.parse(query.data as string)
);

function onAppLyBuyBackBtn(item: ApplyBuyLogs.ResItem) {
  if (!getTimeStatus(queryData))
    return toast.text(t("zan-wei-dao-shu-hui-shi-jian"));
  showDialog({
    title: t("qing-que-ren"),
    message: t("shu-hui-sheng-gou-chan-ping"),
  }).then(() => appLyBuyBack(item));
}
async function appLyBuyBack(item: ApplyBuyLogs.ResItem) {
  const res = await apiApplyBuyBack({ id: item.id! });
  if (res !== true) return;
  removeCache("fundManage");
}
/**获取倒计时状态 true：到期；false：未到期 */
function getTimeStatus(item: ApplyBuyLogs.ResItem) {
  const maturity = dayjs(item.created_at).add(item.day, "day");
  return maturity.isBefore(currentDate.value);
}
const { currentDate } = useCurrentData();
/**获取到期时间 */
function getExpiration(item: ApplyBuyLogs.ResItem = queryData) {
  return dayjs(item.created_at).add(item.day, "day");
}
/**计算按钮文本 */
function getBtnText(item: ApplyBuyLogs.ResItem = queryData) {
  const maturity = getExpiration(item);
  if (maturity.isBefore(currentDate.value)) {
    if (getAutoSubmitStatus(item.auto_repeat)) {
      item.created_at = dayjs().format("YYYY-MM-DD HH:mm:ss");
      removeCache("fundManage");
    } else return t("shu-hui");
  }
  const tm = getCountdown(currentDate.value, maturity);
  return `${tm.D}:${tm.h}:${tm.m}:${tm.s} ${
    Number(item.day) == 1 ? t("shu-hui") : ""
  }`;
}
function getAutoSubmitStatus(status: number) {
  const trueStatus = [1, 2];
  return trueStatus.includes(status);
}
/**切换复投加载状态 */
const switchLoading = ref(false);
/**切换复投 */
async function switchAutoSubmit(item: ApplyBuyLogs.ResItem) {
  switchLoading.value = true;
  const res = await apiSwitchAutoSubmit({ user_store_id: item.id });
  switchLoading.value = false;
  if (!res) return;
  removeCache("fundManage");
  if (getAutoSubmitStatus(queryData.auto_repeat)) queryData.auto_repeat = 0;
  else queryData.auto_repeat = 1;
}
/**用户复投状态 */
const $auto_repeat = computed(() => {
  const falseStatus = [0, 3];
  const { auto_repeat } = queryData;
  if (falseStatus.includes(auto_repeat)) return false;
  if (auto_repeat == 1) return true;
  /**到期时间 */
  const maturity = getExpiration();
  const tm = getCountdown(currentDate.value, maturity);
  if (auto_repeat == 2 && tm.diffTime > 1000) return false;
  return true;
});
</script>

<template>
  <CpageView>
    <div class="list_item">
      <div class="T-S-sm">{{ $t("shen-gou-jin-e") }}</div>
      <div class="C-M1 MT-sm">
        {{ formatNumber(queryData.base_number, 4) }}{{ queryData.store.name }}
      </div>
      <div class="grid-info">
        <div>{{ $t("lei-xing") }}</div>
        <div v-if="queryData.day !== 1">
          {{ queryData.day }}{{ $t("tian-li-cai") }}
        </div>
        <div v-else>{{ $t("sui-cun-sui-qu") }}</div>
        <div>{{ $t("lei-ji-shou-yi") }}</div>
        <div>
          {{ formatNumber(queryData.total_reward, 4) }}
          {{ coinEnum.USDK?.code || coinEnum.NLK?.code }}
        </div>
        <div>{{ $t("shou-yi-shuai") }}</div>
        <div>{{ formatNumber(Number(queryData.multiple) * 100) }}%</div>
        <div>{{ $t("zuo-ri-shou-yi") }}</div>
        <div>
          {{ formatNumber(queryData.yesterday_reward, 4) }}
          {{ coinEnum.USDK?.code || coinEnum.NLK?.code }}
        </div>
        <div>
          {{ $t("ri-qi") }}
          <span>
            {{ dayjs(queryData.created_at).format("MM-DD HH:mm:ss") }}
          </span>
        </div>
        <VanButton
          @click="onAppLyBuyBackBtn(queryData)"
          style="min-width: 5em"
          color="var(--C-success)"
          size="small"
          square
        >
          {{ getBtnText(queryData) }}
        </VanButton>
        <div>{{ $t("fu-tou") }}</div>
        <van-switch
          @click="switchAutoSubmit(queryData)"
          active-color="var(--C-success)"
          :model-value="$auto_repeat"
          :loading="switchLoading"
        />
      </div>
    </div>
  </CpageView>
</template>

<style lang="less" scoped>
.grid-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--T-S-sm);
  margin-top: var(--gap-sm);
  & > * {
    &:nth-child(2n + 1) {
      color: var(--C-T4);
    }
    &:nth-child(2n + 2) {
      justify-self: end;
    }
  }
}
.list_item {
  padding: var(--gap-md) 0;
}
</style>
